<template>
  <quill-editor v-model="editorCont" ref="myQuillEditor" :options="editorOption">
  </quill-editor>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  props: ["content"],
  data() {
    return {
      editorCont: this.content,
      editorOption: {
        // some quill options
        modules: {
          toolbar: {
            container: [["bold", "italic", "underline"], [{ 'list': 'ordered'}, { 'list': 'bullet' }],[{ color: [] }]],
          },
        },
      },
    };
  },

  watch: {
    'content': function (newVal, oldVal) {
      this.editorCont = newVal;
    },
    editorCont: function (newVal, oldVal) {
      this.$emit("update:content", newVal);
    },
  },
};
</script>

<style>
.ql-color-picker {
  top: -5px;
}
.quill-editor {
  margin-right: 15px;
}
</style>